<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>前端开发团队</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
	<!-- 外联的CSS文件-->
	<link rel="stylesheet" href="css/bootstrap.css"/> 
	<link rel="stylesheet" href="css/bootstrap-responsive.css"/> 
	<link rel="stylesheet" href="css/docs.css"/> 



	<script type="text/javascript" src="js/SyntaxHighlighter/scripts/XRegExp.js"></script>
	<script type="text/javascript" src="js/SyntaxHighlighter/scripts/shCore.js"></script>
	<script type="text/javascript" src="js/SyntaxHighlighter/scripts/shBrushJScript.js"></script>
	<link type="text/css" rel="stylesheet" href="js/SyntaxHighlighter/styles/shCore.css"/>
	<link type="text/css" rel="Stylesheet" href="js/SyntaxHighlighter/styles/shThemeDefault.css" />
	<script type="text/javascript">SyntaxHighlighter.all();</script>




	<style>
	body, input, button, textarea {
		font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti,sans-serif;
	  font-weight: normal;
	}
	div.prettyprint{
		border-radius: 4px 4px 4px 4px;
		display: block;
		font-size: 1em;
		line-height: 20px;
		margin:10px 0px;
	}
	.syntaxhighlighter .container:before, .container:after {
		content: none;
	}
	.syntaxhighlighter .gutter .line {
		 border-right: 0px solid #6CE26C !important
	}
	.syntaxhighlighter,.syntaxhighlighter .line.alt2,.syntaxhighlighter .line.alt1 {
		background: none !important;
	}
	</style> <!--内联 css 代码-->
    <link href="css/prettify.css" rel="stylesheet">
    <link href="css/bootstro.css" rel="stylesheet">
</head>

<body>
<!-- Navbar ================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top">
	<div class="navbar-inner">
		<div class="container">
			<a class="brand" href="index.html">前端开发团队</a>
		
			<div class="nav-collapse collapse">
				<ul class="nav">
					<li class="">
						<a href="index.html">首页</a>
					</li>
					<li class="">
						<a class="bootstro" href="getting-started.html">起步</a>
					</li>
					<li class="">
						<a class="bootstro" href="scaffolding.html">脚手架</a>
					</li>
					<li class="">
						<a class="bootstro" href="base-css.html">基本的CSS样式</a>
					</li>
					<li class="active">
						<a class="bootstro" href="components.html">组件</a>
					</li>
					<li class="">
						<a class="bootstro" href="api.html">API手册</a>
					</li>
					<li class="">
						<a class="bootstro" href="docs.html">经验交流</a>
					</li>
					<li class="">
						<a class="bootstro" href="tools.html">工具</a>
					</li>
					<li class="">
						<a class="bootstro" href="about.html">关于</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
    

<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <div class="container">
    <h1>组件</h1>
    <p class="lead">无数可复用的组件，包括导航、警告框、弹出框等更多功能。</p>
  </div>
</header>

  <div class="container">
    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav affix-top">
          <li><a href="#p1"><i class="icon-chevron-right"></i> 树形组件</a></li>
          <li><a href="#p2"><i class="icon-chevron-right"></i> 弹出层组件</a></li>
          <li><a href="#p3"><i class="icon-chevron-right"></i> 图片展示组件</a></li>
		  <li><a href="#p4"><i class="icon-chevron-right"></i> 表单</a></li>
		  <li><a href="#p5"><i class="icon-chevron-right"></i> 列表</a></li>
		  <li><a href="#p6"><i class="icon-chevron-right"></i> 滚动条</a></li>
		  <li><a href="#p7"><i class="icon-chevron-right"></i> 兼容组件</a></li>
		  <li><a href="#p8"><i class="icon-chevron-right"></i> 模板组件</a></li>
		  <li><a href="#p9"><i class="icon-chevron-right"></i> 高亮显示组件</a></li>
		  <li><a href="#p10"><i class="icon-chevron-right"></i> 复制到剪切板组件</a></li>
		  <li><a href="#p11"><i class="icon-chevron-right"></i> 组织架构树</a></li>
        </ul>
      </div>
      <div class="span9">
			<section id="p1">
					  <div class="page-header">
						<h1>树形组件</h1>
					  </div>

					  <h3>Dynatree</h3>
					  <p>贡献者：孔垂芳</p>
					  <p>依赖库：JQuery</p>
					  <img src="images/components/dynatree1.jpg" width="405" height="215" border="0" alt="">
					  <p>官方网站: </p>
					  <p><a href="http://dynatree.googlecode.com/" target="_blank">http://dynatree.googlecode.com/</a></p>
  					  <p><a href="http://code.google.com/p/dynatree/" target="_blank">http://code.google.com/p/dynatree/</a></p>
					  <p>SVN源码：TS-Docs\10-前端开发\02-组件库\jQuery\02-第三方组件\dynatree</p>
					  <p>相关案例：<a href="files/docs/JQuery Dynatree树形组件应用.doc" target="_blank">JQuery Dynatree树形组件应用</a></p>
			</section>

			<section id="p2">
					  <div class="page-header">
						<h1>弹出层组件</h1>
					  </div>

					  <h3>artDalog对话框组件(推荐使用)</h3>
					  <p>贡献者：代昊鑫</p>
					  <p>依赖库：JQuery</p>
					  <p>在线预览:</p>
					  <p><a href="http://www.planeart.cn/demo/artDialog/" target="_blank">http://www.planeart.cn/demo/artDialog/</a></p>
					  <p>在线文档索引: </p>
					  <p><a href="http://aui.github.io/artDialog/" target="_blank">http://aui.github.io/artDialog/</a></p>
					  <p>SVN源码：TS-Docs\10-前端开发\02-组件库\jQuery\02-第三方组件\artDialog\artDialog4.17</p>
					  
					  <br />

					  <h3>FancyBox</h3>
					  <p>贡献者：孔垂芳</p>
					  <p>依赖库：JQuery</p>
					  <img src="images/components/fancybox1.jpg" width="502" height="216" border="0" alt="">
					  <p>官方网站: </p>
					  <p><a href="http://www.fancybox.net/home" target="_blank">http://www.fancybox.net/home</a></p>
					  <p>SVN源码：TS-Docs\10-前端开发\02-组件库\jQuery\02-第三方组件\fancybox</p>
					  <p>相关案例：<a href="files/docs/JQuery FancyBox弹出层组件应用.doc" target="_blank">JQuery FancyBox弹出层组件应用</a></p>
			</section>

			<section id="p3">
					  <div class="page-header">
						<h1>图片展示组件</h1>
					  </div>

					  <h3>Switchable</h3>
					  <p>贡献者：孔纯</p>
					  <p>依赖库：JQuery</p>
					  <img src="images/components/switchable1.jpg" width="601" height="350" border="0" alt="">
					  <img src="images/components/switchable2.jpg" width="752" height="364" border="0" style="padding-top:10px;" alt="">
					  <p>官方网站: </p>
					  <p><a href="http://switchable.mrzhang.me/" target="_blank">http://switchable.mrzhang.me/</a></p>
					  <p>源码下载：</p>
  					  <p><a href="https://github.com/jsw0528/jQuery.Switchable/downloads" target="_blank">https://github.com/jsw0528/jQuery.Switchable/downloads</a></p>
					  <p>SVN源码：TS-Docs\10-前端开发\02-组件库\jQuery\02-第三方组件\Switchable</p>
			</section>

			<section id="p4">
					  <div class="page-header">
						<h1>表单</h1>
					  </div>

					  <h3>Form 表单序列化Ajax提交</h3>
					  <p>贡献者：孔纯</p>
					  <p>依赖库：JQuery</p>
					  <img src="images/components/form-ajax1.jpg" width="557" height="114" border="0" alt="">
					  <p>官方网站: </p>
					  <p><a href="http://www.malsup.com/jquery/form/" target="_blank">http://www.malsup.com/jquery/form/</a></p>
					  <p>源码下载：</p>
  					  <p><a href="http://www.malsup.com/jquery/form/#download" target="_blank">http://www.malsup.com/jquery/form/#download</a></p>
					  <p>API地址：</p>
  					  <p><a href="http://www.malsup.com/jquery/form/#api" target="_blank">http://www.malsup.com/jquery/form/#api</a></p>
					  <p>SVN源码：TS-Docs\10-前端开发\02-组件库\jQuery\02-第三方组件\Form</p>

					  <br />

					  <h3>Validation 表单验证</h3>
					  <p>贡献者：孔纯</p>
					  <p>依赖库：JQuery</p>
					  <img src="images/components/validation1.jpg" width="522" height="285" border="0" alt="">
					  <p>官方网站: </p>
					  <p><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_blank">http://bassistance.de/jquery-plugins/jquery-plugin-validation/</a></p>
					  <p>源码下载：</p>
  					  <p><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_blank">http://bassistance.de/jquery-plugins/jquery-plugin-validation/</a></p>
					  <p>API地址：</p>
  					  <p><a href="http://docs.jquery.com/Plugins/Validation/validate" target="_blank">http://docs.jquery.com/Plugins/Validation/validate</a></p>
					  <p>SVN源码：TS-Docs\10-前端开发\02-组件库\jQuery\02-第三方组件\Validation</p>
			</section>

			<section id="p5">
					  <div class="page-header">
						<h1>列表</h1>
					  </div>

					  <h3>分页</h3>
					  <p>贡献者：羊旭峰</p>
					  <p>依赖库：JQuery</p>
					  <img src="images/components/pagination1.jpg" width="497" height="78" border="0" alt="">
					  <p>官方网站: </p>
					  <p><a href="http://archive.plugins.jquery.com/project/pagination" target="_blank">http://archive.plugins.jquery.com/project/pagination</a></p>
					  <p>API地址：</p>
  					  <p><a href="http://d-scribe.de/webtools/jquery-pagination/lib/jquery_pagination/README" target="_blank">http://d-scribe.de/webtools/jquery-pagination/lib/jquery_pagination/README</a></p>
					  <p><a href="http://www.zhangxinxu.com/wordpress/?p=616" target="_blank">http://www.zhangxinxu.com/wordpress/?p=616</a></p>
					  <p>SVN源码：TS-Docs\10-前端开发\02-组件库\jQuery\02-第三方组件\Pagination</p>
			</section>

			<section id="p6">
					  <div class="page-header">
						<h1>滚动条</h1>
					  </div>

					  <h3>mCustomScrollbar</h3>
					  <p>贡献者：孔纯</p>
					  <p>依赖库：JQuery</p>
					  <img src="images/components/mcustomscrollbar.jpg" width="400" height="290" border="0" alt="">
					  <p>官方网站: </p>
					  <p><a href="http://manos.malihu.gr/jquery-custom-content-scroller/" target="_blank">http://manos.malihu.gr/jquery-custom-content-scroller/</a></p>
					  <p>API地址：</p>
  					  <p><a href="http://manos.malihu.gr/jquery-custom-content-scroller/" target="_blank">http://manos.malihu.gr/jquery-custom-content-scroller/</a></p>
					  <p>SVN源码：TS-Docs\10-前端开发\02-组件库\jQuery\02-第三方组件\mCustomScrollbar</p>
			</section>

			<section id="p7">
					  <div class="page-header">
						<h1>兼容组件</h1>
					  </div>

					  <h3>IE6PNGfix</h3>
					  <p>贡献者：孔纯</p>
					  <p>IE6兼容 png格式文件</p>
					  <p>官方网站: </p>
					  <p><a href="http://www.twinhelix.com/css/iepngfix/" target="_blank">http://www.twinhelix.com/css/iepngfix/</a></p>
					  <p>SVN源码：TS-Docs\10-前端开发\02-组件库\other\iepngfix</p>

					  <br />

					  <h3>PIE</h3>
					  <p>贡献者：孔纯</p>
					  <p>IE6-IE8 支持圆角</p>
					  <p>官方网站: </p>
					  <p><a href="http://css3pie.com/" target="_blank">http://css3pie.com/</a></p>
					  <p>SVN源码：SVN\TS-Docs\10-前端开发\02-组件库\other\PIE</p>
			</section>
			
			<section id="p8">
					  <div class="page-header">
						<h1>模板组件</h1>
					  </div>

					  <h3>artTemplate 模板方法</h3>
					  <p>贡献者：孔纯</p>
					  <p>下载地址: </p>
					  <p><a href="https://github.com/aui/artTemplate" target="_blank">https://github.com/aui/artTemplate</a></p>
					  <p>在线预览: </p>
					  <p><a href="http://aui.github.com/artTemplate/" target="_blank">http://aui.github.com/artTemplate/</a></p>
					  <p>SVN源码：SVN\TS-Docs\10-前端开发\02-组件库\other\artTemplate</p>
			</section>

			<section id="p9">
					  <div class="page-header">
						<h1>高亮显示组件</h1>
					  </div>

					  <h3>高亮显示组件</h3>
					  <p>贡献者：孔纯</p>
					  <img src="images/components/findAndReplaceDOMText.jpg" width="573" height="321" border="0" alt="">
					  <p>官方地址: </p>
					  <p><a href="http://james.padolsey.com/javascript/replacing-text-in-the-dom-solved/" target="_blank">http://james.padolsey.com/javascript/replacing-text-in-the-dom-solved/</a></p>
					  <p>下载地址: </p>
					  <p><a href="https://github.com/padolsey/findAndReplaceDOMText" target="_blank">https://github.com/padolsey/findAndReplaceDOMText</a></p>
					  
					  <p>SVN源码：SVN\TS-Docs\10-前端开发\02-组件库\other\findAndReplaceDOMText</p>
			</section>

			<section id="p10">
					  <div class="page-header">
						<h1>复制到剪切板组件</h1>
					  </div>

					  <h3>Zero Clipboard复制到剪切板组件</h3>
					  <p>贡献者：孔垂芳</p>
					  <p>官方地址: </p>
					  <p><a href="https://github.com/jonrohan/ZeroClipboard" target="_blank">https://github.com/jonrohan/ZeroClipboard</a></p>
					  
					  <p>SVN源码：svn://172.16.30.3/TS-Docs/10-前端开发/02-组件库/other/zeroclipboard</p>
			</section>

			<section id="p11">
					  <div class="page-header">
						<h1>组织架构树</h1>
					  </div>

					  <h3>组织架构树</h3>
					  <p>贡献者：孔纯</p>
					  <img src="images/components/organizationTree.jpg" width="564" height="259" border="0" alt="">
					  <p>使用组件：Dynatree  FancyBox</p>
					  <p>SVN源码：TS-Docs\10-前端开发\02-组件库\jQuery\10-应用范例\组织架构树.rar</p>
			</section>
      </div>
    </div>

  </div>

    <!-- Footer
    ================================================== -->
    <footer class="footer">
      <div class="container">
        <p>苏州科达科技股份有限公司 - 前端开发团队</p>
      </div>
    </footer>


</body>
</html>